import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
import { Button } from 'antd'
import './index.scss'
import { useCountDown, } from '@/hooks/index'
export const Count: React.FC = () => {
    const [count, setCount] = useState(0)
    return (<>
        <h1>这是一段文字{count}</h1>
        <Button onClick={() => setCount(count + 1)} type="primary">count++</Button>
    </>)
}
export const DateCom: React.FC = () => {
    // const [date] = useState({ year: 2023, month: 9, day: 11 })
    const [date] = useState(() => {
        // 此函数只在 函数式组件加载是执行一次
        const dt = new Date()
        return {
            year: dt.getFullYear(),
            month: dt.getMonth() + 1,
            day: dt.getDate(),
            second: dt.getSeconds()
        }
    })

    return (
        <>
            <h1>今日信息：</h1>
            <p>年份：{date.year}年</p>
            <p>月份：{date.month}月</p>
            <p>日期：{date.day}日</p>
            <p>秒：{date.second}</p>
        </>
    )
}
export const RefTimer: React.FC = () => {
    const [count, setCount] = useState(0)
    const time = useRef(Date.now())

    const updateTime = () => {
        time.current = Date.now()
        console.log(time.current)
    }

    console.log('组件被渲染了')

    return (
        <>
            <h3>
                count值是：{count}, 时间戳是：{time.current}
            </h3>
            <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
            <button onClick={updateTime}>给ref赋新值</button>
        </>
    )
}
// 被包装的函数式组件，第一个参数是 props，第二个参数是转发过来的 ref
const Child = React.forwardRef((props, ref) => {
    // 省略子组件内部的具体实现
    const [count, setCount] = useState(0)
    const addCount = () => {
        setCount(count + 1)
    }
    // 1-空数组
    // useImperativeHandle(ref, () => {
    //     console.log('空数组只执行一次');
    //     return (
    //         {
    //             name: 'liulongbin',
    //             age: 22,
    //             addCount: addCount
    //         })
    // }, [])
    // 2-指定某一依赖项数组项执行
    // useImperativeHandle(ref, () => {
    //     console.log('依赖项数组项addCount执行了');
    //     return (
    //         {
    //             name: 'liulongbin',
    //             age: 22,
    //             addCount: addCount
    //         })
    // }, [addCount])
    // 3-省略依赖项数组赖项数组项 组件内任何 state 的变化，都会导致 useImperativeHandle 中的回调的重新执行
    useImperativeHandle(ref, () => {
        console.log('组件内任何变化都执行');
        return (
            {
                name: 'liulongbin',
                age: 22,
                addCount: addCount
            })
    })
    return (
        <>
            <Button onClick={addCount}>count++</Button>
            <span>
                子组件 count:{count}
            </span>
        </>
    )
})
// 父组件
export const Father: React.FC = () => {
    const childRef = useRef<{ count: number; addCount: () => void }>()

    // 按钮的点击事件处理函数
    const onShowRef = () => {
        console.log(childRef.current)
    }
    const childBtn = () => {
        childRef.current?.addCount()
    }
    return (
        <>
            <h1>Father 父组件</h1>
            {/* 点击按钮，打印 ref 的值 */}
            <Button onClick={onShowRef}>show Ref</Button>
            <h1>Father 父组件调用子组件button事件</h1>
            {/* 点击按钮，打印 ref 的值 */}
            <Button onClick={childBtn}>child count++</Button>
            <hr />
            <Child ref={childRef} />
        </>
    )
}
// 倒计时
export const CountDownPageBtn: React.FC<{ seconds: number }> = (props) => {
    const [count, disabled, startCount] = useCountDown()
    return (
        <>
            <Button type="primary" disabled={disabled} onClick={() => startCount(10)}>发送验证码{count ? '：' + count : ''}</Button>
        </>
    )
}
export const CountDownPage: React.FC = () => {
    return (
        <>
            <CountDownPageBtn seconds={10}></CountDownPageBtn>
        </>
    )
}
export const RandomNumber: React.FC = () => {
    const [num, setNum] = useState(Math.random() * 200)

    useLayoutEffect(() => {
        if (num === 0) {
            setNum(10 + Math.random() * 200)
        }
    }, [num])

    return (
        <>
            <h1>num 的值是：{num}</h1>
            <button onClick={() => setNum(0)}>重置 num</button>
        </>
    )
}

export default () => (<>
    <h1>Count</h1>
    <Count></Count>
    <h1>DateCom</h1>
    <DateCom></DateCom>
    <h1>RefTimer</h1>
    <RefTimer></RefTimer>
    <h1>Father</h1>
    <Father></Father>
    <h1>CountDownPage</h1>
    <CountDownPage></CountDownPage>
    <h1>RandomNumber</h1>
    <RandomNumber></RandomNumber>
</>)